<template>
  <div id="app">
    <img src="./assets/logo.png">
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-table :data="tableData">
      <el-table-column label="编号" type="index"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="手机号" prop="tel"></el-table-column>
      <el-table-column label="性别" prop="sex">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.sex == 0 ? "女" : "男" }}</el-tag>
          <!-- <span v-if="tableData.sex === 1">男</span>
          <span v-else-if="scope.row.sex === 0">女</span> -->

        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination @size-change="handleSizeChange" @current-Chang="handleCurrentChange" :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total,sizes,prev,paper,next,jumper" :total="total">
    </el-pagination> -->

    <!--分页区域-->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
      :page-sizes="[1, 2, 5, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#table {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<script>
//1、导入axios
import axios from "../node_modules/axios";

import Qs from 'qs'
export default {
  data() {
    return {
      tableData: [],
      //queryInfo:{
        pagenum:1,//当前页数
        pagesize:2,//每页显示的条数
      //},
      total: 0,//总数
    };
  },
  methods: {
  	   // 展示用户列表      
    queryUserList() {

      let url='/api/TestInfo'
      let page={
        pagesize:this.pagesize,
        pagenum:this.pagenum
      }

      axios.defaults.headers['content-type']='appliction/json; charset=UTF-8'
        this.$axios.post(url,page,
      //this.$axios.get(url,
      //this.page,
        //{pagesize:this.pagesize,pagenum:this.pagenum},
      //Qs.stringify(this.data),
      // {
      //   'content-type':'appliction/json; charset=UTF-8'
      // }
          // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
          ).then(res =>{
            // 请求成功后的数据返回给用户列表用于展示
             this.tableData = res.data.stainfo
             this.total=res.data.total
          }).catch(error =>{
            console.log(url)
             console.log(error)
          })
    },
    handleSizeChange(newSize){
      this.pageInfo.pagesize=newSize
      this.queryUserList()
      console.log(newSize)
    },
    handleCurrentChange(newPage){
      this.pageInfo.pagenum=newPage
      this.queryUserList()
      console.log(newPage)
    }
  },
  mounted() {
  	// 页面加载就渲染用户列表
    this.queryUserList();
  },
};

</script>




